<template>
    <div>
        <ul class="steps">
            <li class="step-item" v-for="(item, index) in props.data" :key="index"
                @click="props.clickStep && handleClick(item)" :class="{ pointer: props.clickStep }">
                <p class="line" :class="{ 'line-active': props.active >= item.step }">
                </p>
                <span class="circle" :class="{ active: props.active >= item.step }">
                    {{ item.step }}
                </span>
                <span class="title">{{ item.title }}</span>
            </li>
        </ul>
    </div>
</template>

<script setup>
import { defineComponent, toRefs, ref, reactive, toRef, computed, onMounted } from 'vue'

const props = defineProps({
    // 当前步骤
    active: {
        type: [String, Number],
        default: 1
    },
    data: {
        type: Array,
        default: () => []
    },
    // 步骤可否点击
    clickStep: {
        type: Boolean,
        default: false
    }
})
const emit = defineEmits(['on-click'])

function handleClick (item) {
    emit('on-click', item)
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.steps {
    display: flex;
    align-items: center;
    width: 720px;
    margin: 0 auto;

    .step-item {
        flex-basis: 50%;
        text-align: center;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        position: relative;

        .line {
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: #D9EDFE;
            right: 0;
            top: 28%;
            transform: translate(0, -50%);


            .inner-line {
                position: absolute;
                left: 0;
                top: 0;
                display: inline-block;
                width: 0;
                height: 100%;
                background-color: var(--srt-color-primary);
            }

        }

        .circle {
            display: inline-block;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: #D9EDFE;
            font-size: 18px;
            font-weight: bold;
            color: #FFFFFF;
            line-height: 36px;
            margin-bottom: 8px;
            position: relative;
            z-index: 1;
        }

        .active {
            background-color: var(--srt-color-primary);
        }

        .line-active {
            background-color: var(--srt-color-primary);
        }

        .title {
            font-size: 14px;
            color: var(--srt-main-text-color);
        }

    }

    .pointer {
        cursor: pointer;
    }

    & .step-item:first-child .line {
        width: 50%;
        right: 0;
    }

    & .step-item:last-child .line {
        width: 50%;
        left: 0;
    }

}
</style>
